<template>
    <div class='search-box'>
        <i class="icon-search"></i>
        <input ref="query" type="text" class="box" v-model="query" :placeholder="placeholder" />
        <i @click="clear" v-show="query" class="icon-dismiss"></i>
    </div>
</template>

<script>
import { debounce } from '../../common/js/utile';
export default {
    components: {},
    props: {
        placeholder: {
            type: String,
            default: '搜索歌曲、歌手'
        }
    },
    data() {
        return {
            query: ''
        };
    },
    methods: {
        clear() {
            this.query = ''
        },
        setQuery(query) {
            this.query = query
        },
        blur() {
            this.$refs.query.blur()
        }
    },
    created() {
        this.$watch('query', debounce((newQuery) => {
            this.$emit('query', newQuery)
        }, 200))
    },
    computed: {},
}
</script>
<style lang='scss' scoped>
@import "../../common/scss/variable.scss";

.search-box {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    padding: 0 6px;
    height: 40px;
    background: $color-highlight-background;
    border-radius: 6px;
    .icon-search {
        font-size: 24px;
        color: $color-background;
    }
    .box {
        flex: 1;
        margin: 0 5px;
        line-height: 18px;
        background: $color-highlight-background;
        color: $color-text;
        font-size: $font-size-medium;
        &::placeholder {
            color: $color-text-d;
        }
    }
    .icon-dismiss {
        font-size: 16px;
        color: $color-background;
    }
}
</style>
